<!DOCTYPE html>
<html lang="ch"
	  xmlns:th="http://www.thymeleaf.org">
	<head>
		<link href="/static/asserts/images/favicon.ico" rel="shortcut icon" th:href="@{/asserts/images/favicon.ico}"/>
		<title>登录页面</title>
		<!-- Bootstrap core CSS -->
		<link href="/asserts/css/bootstrap.min.css" th:href="@{../asserts/css/bootstrap.min.css}" rel="stylesheet">
		<!-- Custom styles for this template -->
		<link href="/asserts/css/signin.css" th:href="@{../asserts/css/signin.css}" rel="stylesheet">
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	</head>

	<body class="text-center"  style=" background:url('asserts/images/bg1.png') no-repeat;background-size: 100%">
		<form class="form-signin" th:action="@{login}" method="post" style="border:gray 1px solid;background: #c3d6ff">
			<img  src="asserts/images/dog.png" alt="" width="72" height="72">
			<h1 class="h3 mb-3 font-weight-normal"  >请登录</h1>
			<p th:text="${msg}" style="color: red" th:if="${not #strings.isEmpty(msg)}" >
			<p th:if="${not #strings.isEmpty(regist)}" th:text="${regist}" id="regsuccess"></p>
			</p>

			<label class="sr-only">帐号</label>
		    <input type="text" class="form-control" name="username" th:placeholder="帐号或者身份证" required="" >
			<label class="sr-only">密码</label>
			<input type="password" class="form-control"  name="password"  th:placeholder="密码" required="">
			<label class="sr-only" >验证码</label>
			<input type="text" class="form-control"  name="captcha" th:placeholder="验证码"     required="">
			<input type="text" hidden="hidden"  name="deviceId"  id="deviceId">
			</br>
			<img  id="imagePic" alt="图片" src="" onclick="getcaptcha()" width="190px" height="100px">
			<br>
			<div class="checkbox mb-3">
				<label>
<!--          <input type="checkbox"  name="remenber"/> 记住我-->
        </label>
			</div>
			<button class="btn btn-lg btn-primary btn-block" type="submit" >登录</button>
			<a class="btn btn-lg btn-primary btn-block"   th:href="@{toRegist}"> 去注册</a>
<!--			<a class="btn btn-sm btn-primary btn-block" th:href="@{/t2}" >返回首页</a>-->
			<p class="mt-5 mb-3 text-muted">© 2020-2021</p>
		</form>


		<script>
			getRandom();
			getcaptcha();
			function getRandom() {
				// 返回一个随机数
				return Math.floor(Math.random()*100000);
			}

			function getcaptcha() {
				let random = getRandom();
				$.ajax({
					type:"get",
					url:"user/init/captcha",
					data:{'deviceId':random},
					success:function (data) {
						//将图片的Base64编码设置给src
						$("#imagePic").attr("src","data:image/png;base64,"+data.data);
						$("#deviceId").attr("value",random);
					},
					error:function(data){
						alert('服务器内部错误！');
					},
				});
			};

			function registSuccess() {
				if ($("#regsuccess").getAttribute("text")) {
					alert("注册成功");
				}
			}
		</script>



	</body>
</html>
